.headers{
  display: flex;
  align-items: center;
  padding: 17rpx 40rpx 34rpx;
  .area,.serch,.data{
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #DFDFDF;
    image{
      width: 26rpx;
      height: 14rpx;
    }
  }
  .area{
    
    image{
      margin: 0 10rpx;
    }
  }
  .serch{
    background: #33363D;
    box-shadow: 0 0 8rpx 2rpx rgba(0,0,0,0.33);
    border-radius: 26rpx;
    padding: 12rpx 24rpx;
    flex: 1;
    color: #7A7A7A;
    image{
      width: 27rpx;
      height: 27rpx;
      margin-right: 14rpx;
    }
  }
  .data{
    margin-left: 14rpx;
    image{
      width: 50rpx;
      height: 50rpx;
    }
  }
}


.swiperBanner{
  position: relative;
  padding-bottom: 26rpx;
  .pageNation{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .page{
      background-color: #fff;
      opacity: 0.4;
      width: 10rpx;
      height: 10rpx;
      border-radius: 20rpx;
      margin: 0 8rpx !important;
      transition: .3s linear;
    }
    .active{
      opacity: 1;
      width: 30rpx;
    }
  }
  swiper{
    height: 290rpx;
    swiper-item{
      display: flex;
      align-items: center;
      justify-content: center;
      
      image{
        height: 100%;
        width: 100%;
        transform: scale(0.9); 
        border-radius: 10rpx;
        overflow: hidden;
        transition: .3s linear;
      }
      .auto{
        transform: scale(1); 
      }
    }
  }
}


.common{
  padding: 44rpx 0 0 40rpx;
  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40rpx;
    .left{
      display: flex;
      align-items: center;
      font-family: PingFangSC-Medium;
      font-size: 36rpx;
      color: #DFDFDF;
      .borderLeft{
      
        background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%); 
        width: 8rpx;
        height: 34rpx;
        margin-right: 10rpx;
      }
    }
    .right{
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #DFDFDF;
    }
  }
}

.contemt{
  padding-top: 16rpx;
  .item{
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    image{
      width: 180rpx;
      height: 244rpx;
    }
    .title{
      font-family: PingFangSC-Medium;
      font-size: 24rpx;
      color: #DFDFDF;
      margin: 12rpx 0 7rpx 0;
      text-indent: 2em;
      width: 100%;
    }
    .btn{
      background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
      box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.50);
      border-radius: 22rpx;
      width: 100rpx;
      height: 44rpx;
      font-size: 24rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
  }
}

.coming_soon{
  .contemt image{
    width: 240rpx;
    height: 340rpx;
  }
}
.selectPreview{
  .contemt image{
    width: 590rpx;
    height: 320rpx;
  }
}
